<template>
    <!-- 规格选择器 -->
    <div class="item flex mb-3" v-for="spec in product?.specs" :key="spec.name">
      <span class="pl-2 text-3.5 text-gray-500" style="width: 75px">{{ spec.name }}</span>
      <div class="spec-options">
        <div v-for="value in spec.values" class="inline-block pos-relative mr-5">
          <el-tag
            class="mb-2 cursor-pointer"
            :key="value"
            size="large"
            style="min-width: 65px"
            :type="isSpecSelected(spec.name, value) ? 'danger' : 'info'"
            @click="selectSpec(spec.name, value)"
            :disabled="!availableSpecs(spec.name, value)"
          >
            {{ value }}
          </el-tag>
          <span
            class="text-gray-500 pos-absolute bg-gray-400 text-2.5 text-white px-1 py-0.5"
            style="top: -7.5px; right: 5px"
          >
            无货
          </span>
        </div>
      </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, computed, watch, watchEffect, onMounted } from "vue";
import type { ProductInfo, Sku } from "@/api/types/product";

// 定义规格选择对象的类型
type SelectedSpecs = {
  [key: string]: any; // 或更具体的类型如 string
};

const props = defineProps<{
  product: ProductInfo | null; // 允许接收null
}>();

const emit = defineEmits<{
  (e: "update:selectedSpecs", value: SelectedSpecs): void;
}>();


// 初始化默认选择

const emptySku: Sku = {
  id: "",
  specs: {},
  price: 0,
  stock: 0,
  image: "",
  originalPrice: 0,
};
// 当前选择的规格组合
const selectedSpecs = ref<SelectedSpecs>({});

// 计算当前SKU
const currentSku = computed<Sku>(() => {
  // 使用可选链确保安全访问
  const foundSku = props.product?.skus?.find((sku) =>
    Object.entries(selectedSpecs.value).every(
      ([specName, specValue]) => sku.specs[specName] === specValue
    )
  );
  return foundSku || emptySku;
});
// 提前计算所有有效规格组合
const validCombinations = computed(() => {
  return props.product?.skus?.map((sku) => sku.specs) || [];
});

// 使用备忘录优化规格可用性检查
const availableSpecs = computed(() => {
  const cache = new Map<string, boolean>();
  return (specName: string, specValue: string) => {
    const key = `${specName}-${specValue}-${JSON.stringify(selectedSpecs.value)}`;
    if (!cache.has(key)) {
      const tempSpecs = { ...selectedSpecs.value, [specName]: specValue };
      cache.set(
        key,
        props.product?.skus?.some((sku) =>
          Object.entries(tempSpecs).every(([n, v]) => sku.specs[n] === v)
        ) ?? false
      );
    }
    return cache.get(key)!;
  };
});

const initDefaultSelection = () => {
  if (!props.product?.specs) return;

  // 创建临时对象避免重复触发响应式更新
  const newSelectedSpecs: Record<string, string> = {};

  props.product.specs.forEach((spec) => {
    // 找出第一个有库存的规格值
    const availableValue = spec.values.find((value) => {
      const tempSpecs = { ...newSelectedSpecs, [spec.name]: value };
      return props.product?.skus?.some((sku) =>
        Object.entries(tempSpecs).every(
          ([name, val]) => sku.specs[name] === val && sku.stock > 0
        )
      );
    });

    if (availableValue) {
      newSelectedSpecs[spec.name] = availableValue;
    }
  });
  console.log(newSelectedSpecs);
  // 一次性更新响应式变量
  selectedSpecs.value = newSelectedSpecs;
  // 把新的规格值传递给父组件
  emit("update:selectedSpecs", newSelectedSpecs);
};
// 选择规格
const selectSpec = (specName: string, specValue: string) => {
  if (isSpecSelected(specName, specValue)) {
    delete selectedSpecs.value[specName];
  } else {
    selectedSpecs.value[specName] = specValue;
  }
  emit("update:selectedSpecs", selectedSpecs.value);
};
// 检查规格是否已选
const isSpecSelected = (specName: string, specValue: string) => {
  return selectedSpecs.value[specName] === specValue;
};

/**
 * 自动选择第一个可用规格组合，有两个方案
 * 方案一：
 * > 需要严格保证默认选择都有库存
 * > 规格之间存在复杂依赖关系
 * > SKU数量较少（<50个）
 *
 * 方案二：
 * > 商品SKU数量较多（>50个）
 * > 希望优先展示有库存的完整组合
 * > 可以接受部分规格可能无库存（需UI标注）
 */
onMounted(() => {
  // 方案一
  // initDefaultSelection();
});
watch(() => props.product, initDefaultSelection, { immediate: true });
// 在computed或独立函数中实现
const getDefaultSelection = (product: ProductInfo) => {
  console.log("自动选择第一个可用规格组合");
  const defaultSpecs: Record<string, string> = {};
  if (!product?.specs) return defaultSpecs;

  // 优先选择有库存的SKU对应规格
  const availableSku = product.skus.find((sku) => sku.stock > 0);
  if (availableSku) {
    product.specs.forEach((spec) => {
      const skuValue = availableSku.specs[spec.name];
      if (spec.values.includes(skuValue)) {
        defaultSpecs[spec.name] = skuValue;
        return;
      }
    });
  }

  // 补充未匹配到的规格
  product.specs.forEach((spec) => {
    if (!defaultSpecs[spec.name]) {
      const firstValid = spec.values.find((value) => {
        const testSpecs = { ...defaultSpecs, [spec.name]: value };
        return product.skus.some((sku) =>
          Object.entries(testSpecs).every(([n, v]) => sku.specs[n] === v)
        );
      });
      if (firstValid) defaultSpecs[spec.name] = firstValid;
    }
  });

  return defaultSpecs;
};

//   方案二
watchEffect(() => {
  if (props.product) {
    selectedSpecs.value = getDefaultSelection(props.product);
  }
});
</script>
<style scoped lang="scss">
</style>
